<template>
	<view>
		<view class="search-box">
			<uni-search-bar  @confirm="huiChe" @clear="Quxiao"  @input="input" :radius="100" cancelButton="none"/>
		</view>
		<!-- 搜索推荐内容 -->
		<view class="search-valist" v-show="ishow == 1">
			<view class="search-kot" v-for="item in SearchList" :key="item.goods_id" @click="gotoDetai(item.goods_id)">
				<view class="search-name">{{item.goods_name}}</view>
				<uni-icons type="arrowright" size="16"/>
			</view>
		</view>
		<!-- 搜索历史 -->
		<view class="seach-list" v-show="ishow==0">
			<view class="seach-top">
				<text class="seach-left">搜索历史</text>
				<uni-icons type="trash" size="20" @click="haodqingkong"></uni-icons>
			</view>
			<view class="seach-item">
				<view class="seach-value" v-for="(item,index) in searchList" :key="index" @click="haodsslis(item)">{{item}}</view>
			</view>
			<view class="kong" v-if="searchList.length < 1">
				<text class="totie">空空如也o(╥﹏╥)o</text>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex'
	export default {
		data() {
			return {
				//输入框输入的内容
				kewoode:"",
				time:null,
				//搜索推荐数据
				SearchList:[],
				ishow:0
			};
		},
		computed:{
			...mapState(['searchList'])
		},
		methods:{
			//历史记录点击事件
			haodsslis(kw){
				uni.navigateTo({
					url:'/subpkg/goods_list/goods_list?query=' + kw
				})
			},
			//搜索推荐点击事件
			gotoDetai(id){
				uni.navigateTo({
					url:'/subpkg/goods_detail/goods_detail?id=' + id
				})
			},
			//获取搜索推荐数据
			async getSearchList(){
				if(this.kewoode.trim() == '') {
					this.SearchList = []
					return
				}
				const {data:res} = await uni.$http.get('/goods/qsearch',{query:this.kewoode})
				if(res.meta.status == 200){
					this.SearchList = res.message
				}else{
					uni.$showMsg()
				}
			},
			//输入框里有内容就触发
			input(val){
				clearTimeout(this.time)
				this.time = setTimeout(()=>{
					this.kewoode = val
					//获取搜索推荐数据
					this.getSearchList()
				},500)
				if(val.trim() == ''){
					this.ishow = 0
				}else{
					this.ishow = 1
				}
			},
			//输入框回车事件
			huiChe(){
				if(this.kewoode.trim() == '')return
				this.$store.commit('searchval',this.kewoode)
				this.kewoode = ''
			},
			//输入框取消事件
			Quxiao(){
				this.ishow = 1
				this.kewoode = ''
				this.SearchList = []
			},
			//清空搜索历史
			haodqingkong(){
				if(this.searchList.length > 0){
					uni.showModal({
						title:'提示',
						content:'删除全部历史记录?',
						success:({ confirm,cancel})=>{
							if (confirm){
								this.$store.commit('haodoqingkong')
								uni.showToast({
								    title: '删除成功',
								    duration: 2000
								});
							}
						}
					})
				}else{
					uni.showToast({
					    title: '无历史记录',
					    duration: 2000
					});
				}
			}
		},
		watch:{
		}
	}
</script>

<style lang="scss">
.search-box{
	position: sticky;
	top: 0;
	z-index: 999;
	background: #ffaa00;
}
.search-valist{
	background: #FFFFFF;
	padding-bottom: 10px;
	.search-kot{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px 5px;
		border-bottom: 1px solid #6a6a6a;
		.search-name{
			font-size: 12px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
}
.seach-list{
	padding: 10px;
	.kong{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 30px;
		.totie{
			color: #9e9e9e;
		}
	}
	.seach-top{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
		border-bottom: 1px solid #4a4a4a;
		padding-bottom: 10px;
		.seach-left{
			font-weight: 100;
		}
	}
	.seach-item{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		.seach-value{
			border-radius: 5px;
			color: #ffaa00;
			height: 24px;
			line-height: 24px;
			text-align: center;
			margin-right: 5px;
			margin-bottom: 10px;
			padding: 0 10px;
			font-size: 15px;
			background-color: #9d9d9d;
		}
	}
}
</style>
